<template>
  <div class="nation">
    <el-checkbox-group v-model="model.disabilityList">
      <el-checkbox label="01" @change="handlerCheckBox('01')"
        >无残疾</el-checkbox
      >
      <el-checkbox label="02" @change="handlerCheckBox('02')"
        >视力残疾</el-checkbox
      >
      <el-checkbox label="03" @change="handlerCheckBox('03')"
        >听力残疾</el-checkbox
      >
      <el-checkbox label="04" @change="handlerCheckBox('04')"
        >言语残疾</el-checkbox
      >
      <el-checkbox label="05" @change="handlerCheckBox('05')"
        >肢体残疾</el-checkbox
      >
      <el-checkbox label="06" @change="handlerCheckBox('06')"
        >智力残疾</el-checkbox
      >
      <el-checkbox label="07" @change="handlerCheckBox('07')"
        >精神残疾</el-checkbox
      >
      <el-checkbox label="99" @change="handlerCheckBox('99')"
        >其他残疾</el-checkbox
      >
      <el-input v-model="model.disabilityValue" style="width:120px" />
    </el-checkbox-group>
  </div>
</template>

<script>
export default {
  props: {
    model: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {}
  },
  methods: {
    handlerCheckBox(value) {
      const emptyVal = "01"
      // 1 无 5 其他
      const currentIsChecked = this.model.disabilityList.includes(value)
      // 当选择无时
      if (value === emptyVal && currentIsChecked) {
        this.model.disabilityList = ["01"]
      } else if (value !== emptyVal) {
        this.model.disabilityList = this.model.disabilityList.filter(
          v => v != "01"
        )
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.nation {
  // display: flex;
  .el-input {
    margin-left: 15px;
  }
}
</style>
